<template>
  <div class="amap-cars">
    <div class="swiper-car">
      <swiper :options="swiperOption" class="swiper">
        <swiper-slide> <CarItem height="580px" /> </swiper-slide>
        <swiper-slide> <CarItem /> </swiper-slide>
        <swiper-slide> <CarItem /> </swiper-slide>
        <swiper-slide> <CarItem /> </swiper-slide>
        <swiper-slide> <CarItem /> </swiper-slide>
        <swiper-slide> <CarItem /> </swiper-slide>
        <!-- <div class="swiper-pagination" slot="pagination"></div> -->
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
    </div>
  </div>
</template>
<script>
  import CarItem from "../../components/carslist/index.vue"
  import "swiper/dist/css/swiper.css"
  import { swiper, swiperSlide } from "vue-awesome-swiper"
  export default {
    name: "Cars",
    components: { CarItem, swiper, swiperSlide },
    data() {
      return {
        swiperOption: {
          loop: true,
          slidesPerView: 3,
          spaceBetween: 1,
          // 设置点击箭头
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        },
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      },
    },
    methods: {},
  }
</script>
<style lang="scss">
  @import "./index.scss";
</style>
